<template>
	<view class="zh-service-logistics">
		<view class="banner">
			<view class="banner-inner display-flex justify-between">
				<view class="left">
					<view class="title">
						<text>中恒纺织交易市场</text>
					</view>
					<view class="des">平台与全国针织重地张槎镇政府合力建设的纺织品智能化仓储物流中心，中恒纺织交易市场面积超九万平方米，是佛山库容量最大的智能化仓库</view>
				</view>
				<view class="right">
					<image :src="IMG_URL + '/service/logistics/banner.png'"/>
				</view>
			</view>
			
		</view>
		<view class="content">
			<view class="item display-flex align-center">
				<image :src="IMG_URL + '/service/logistics/1.png'"/>
				<view class="right flex">
					<view>
						<text>货物安全保障</text>
					</view>
					<view class="des">
						<text>专业管理人员，制度化管理，高标准硬件设施，可视化监控，确保货物品质和安全</text>
					</view>
				</view>
			</view>
			<view class="item display-flex  align-center">
				<image :src="IMG_URL + '/service/logistics/2.png'"/>
				<view class="right flex">
					<view class="top">
						<view class="title">
							<text>仓库分布广</text>
						</view>
						<view class="des">
							<text>自营仓库和合作仓库遍布全国</text>
						</view>
					</view>
					<view class="bottom display-flex justify-between align-center" @click="navigateTo('/pages/service/distribution')">
						<text class="label">云仓分布</text>
						<image src="@/static/icons/right_arrow_light.png" class="right-arrow"/>
					</view>
				</view>
			</view>
			<view class="item display-flex align-center">
				<image :src="IMG_URL + '/service/logistics/3.png'"/>
				<view class="right flex">
					<view class="title">
						<text>服务高效便捷</text>
					</view>
					<view class="des">
						<text>仓储服务和供应链服务数据互通，客户可在线交易、提货办单，查货对账，省心省力</text>
					</view>
				</view>
			</view>
			<view class="item display-flex align-center">
				<image :src="IMG_URL + '/service/logistics/4.png'"/>
				<view class="right flex">
					<view class="title">
						<text>物流配送</text>
					</view>
					<view class="des">
						<text>充足运力，辐射珠三角。车辆全程定位，确保货物安全送达</text>
					</view>
				</view>
			</view>
		</view>
		<view class="bottom-btns display-flex justify-between align-center">
			<view class="left flex"  @click="openServiceLink">
				<text>业务洽谈</text>
			</view>
			<view class="right flex" @click="reLaunch('/pages/userCenter/index')">
				<text>智慧云仓</text>
			</view>
		</view>
		<service-link :show="showServiceLink" @close="changeServiceLink" @link="linkService" @save="saveService"></service-link>
	</view>
</template>

<script setup lang="ts">
	import { ref } from 'vue'
	import { tip } from '@/utils'
	import { onHide, onShareAppMessage } from '@dcloudio/uni-app'
	import serviceLink from '@/pages/components/service-link'
	
	import { IMG_URL } from '@/utils/constant'
	const showServiceLink = ref(false)
	
	onShareAppMessage(() => {})
	
	onHide(() => {
		showServiceLink.value = false
	})
	
	const openServiceLink = () => {
		changeServiceLink()
	}
	
	const changeServiceLink = () => {
		showServiceLink.value = !showServiceLink.value
	}
	
	const linkService = () => {
		uni.makePhoneCall({
			phoneNumber:"0757-82138330",
			success:() => {
				console.log('拨打电话成功')
			},
			fail:() => {
				
			}
		})
	}
	
	const saveService = () => {
		tip.showToast('已保存，请用微信扫码加好友')
	}
	
	const reLaunch = (url:string) => {
		uni.reLaunch({
			url:url
		})
	}
	
	const navigateTo = (url:string) => {
		uni.navigateTo({url:url})
	}
</script>
<style>
	page {
		background-color: #fff;
	}
</style>
<style lang="scss" scoped>
	.zh-service-logistics {
		.banner {
			padding:45rpx 32rpx 24rpx;
			background:#fff;
			.banner-inner {
				background-color:#E3F1FE;
				border-radius: 18px;
				padding:51rpx 35rpx 33rpx;
				.left {
					.title {
						font-size:34rpx;
						color:#191A1B;
					}
					.des {
						font-size: 24rpx;
						color:#797A7D;
						margin-top: 20rpx;
					}
				}
				.right {
					margin-top: 30rpx;
					image {
						width:177rpx;
						height: 141rpx;
					}
				}
			}
			
		}
		.content {
			margin-top: 20rpx;
			background-color:#fff;
			.item {
				margin-left:30rpx;
				image {
					width:90rpx;
					height:90rpx;
				}
				.right {
					padding:30rpx 30rpx 30rpx 0;
					border-bottom:1rpx solid rgba(0,0,0,0.1);
					margin-left:25rpx;
					.title {
						font-size: 34rpx;
						color:#333;
					}
					.des {
						font-size: 24rpx;
						color:#999;
						margin-top:15rpx;
					}
					.bottom {
						background-color: #F2F2F2;
						padding:31rpx 39rpx;
						border-radius: 12rpx;
						margin-top: 28rpx;
						.label {
							color:#333;
							font-size:28rpx;
						}
						.right-arrow {
							width:12rpx;
							height: 22rpx;
						}
					}
				}
			}
		}
		.bottom-btns {
			padding:40rpx 30rpx 120rpx;
			.left {
				width: 333rpx;
				height: 90rpx;
				line-height: 90rpx;
				background: #FFFFFF;
				border: 2rpx solid #1769FF;
				border-radius: 12rpx;
				color:#1769FF;
				font-size: 36rpx;
				text-align: center;
			}
			.right {
				width: 333rpx;
				height: 90rpx;
				line-height: 90rpx;
				background: #1769FF;
				border-radius: 12rpx;
				color:#fff;
				font-size: 36rpx;
				text-align: center;
				margin-left:30rpx;
			}
		}
	}
</style>
